<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom-lib DEMO</title>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
.sel{
	border:solid 1px #7F9DB9;
}
.opt{
	background-color:#FFFFFF;
	border:solid 1px #7F9DB9;
}
.opt li{
	display:block;
	width:100%;
}
.opt li.now{
	background-color:blue;
	color:#FFF;

}
</style>
</head>

<body>
<form autoComplete="Off">
<input onclick="test()" type="radio" autocomplete="Off" name="te" checked="checked" />
<input autocomplete="Off" type="radio" name="te" />
<input type="text" />
</form>
asdasd<select id="sel" name="sel">
	<option value="a">aaaaaaaa</option>
	<option value="b">bbbbbbbb</option>
	<option value="c">ccccccccccc</option>
	<option >ddddddddd</option>
	<option value="e">eeeeeeeeeeeeeeee</option>
	<option value="f">fffffff</option>
</select>
<input type="button" value="test" onclick="test()" />
<!--
<ul id="ul1" class="ulv">
	<li>aaaaaaaa</li>
	<li>bbbbbbbb</li>
	<li>ccccccccccc</li>
	<li>ddddddddd</li>
	<li>eeeeeeeeeeeeeeee</li>
	<li>fffffff</li>
</ul>-->

<span id="span1" tabindex=1>2</span>

<span tabindex=3>3</span>

<span tabindex=2 onfocus="document.body.appendChild(document.createTextNode('ssss'))">4</span>

<span tabindex=5 onfocus="document.getElementsByTagName('span')[0].focus();">5</span>

<span tabindex=4>6</span>
<select><option>123</option><option>qqq</option><option>ddd</option><option>ffffffffffff</option></select>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<input type="text" id="txt1" value="" />
<input type="checkbox" id="ck" />
</body>
<script type="text/javascript" src="http://dom-lib.googlecode.com/files/dom.js"></script>
<script type="text/javascript">
function test(){alert(this);}
//键盘对象 键-值对
    var keyCode = {
        BACKSPACE: 8,
        CAPS_LOCK: 20,
        COMMA: 188,
        CONTROL: 17,
        DELETE: 46,
        DOWN: 40,
        END: 35,
        ENTER: 13,
        ESCAPE: 27,
        HOME: 36,
        INSERT: 45,
        LEFT: 37,
        NUMPAD_ADD: 107,
        NUMPAD_DECIMAL: 110,
        NUMPAD_DIVIDE: 111,
        NUMPAD_ENTER: 108,
        NUMPAD_MULTIPLY: 106,
        NUMPAD_SUBTRACT: 109,
        PAGE_DOWN: 34,
        PAGE_UP: 33,
        PERIOD: 190,
        RIGHT: 39,
        SHIFT: 16,
        SPACE: 32,
        TAB: 9,
        UP: 38
    }


//Class Dom's constructor
function Dom(tagName){
	return this.init(tagName);
}
Dom.prototype={
	show:function(){this.style.display="";return this;},
	hide:function(){this.style.display="none";return this;},
	remove:function(){this.parentNode.removeChild(this);return this;},

	addClass:function(cname){
		this.className=this.className?cname:(this.className+" "+cname);
		return this;
	},
	removeClass:function(cname){
		if(cname===undefined){
			this.className="";
			
		}else{
			this.className=this.className.replace(/\s?now\b/,"");
		}
		return this;
	},
	isShow:function(){
		return this.style.display!="none";
	},

	init:function(tagName){
		var dom=document.createElement(tagName);
		for(var k in this){
			if(k!="init"){
				dom[k]=this[k];
			}
		}
		return dom;
	}
};


//Class Select's constructor
function Select(src){
	
	this.init(src);
}
//depends on Class Dom;
Select.prototype={
	selectingValue:null,//正选择的值，用于click,blur
	selectedOption:null,//当前选项
	now:null,
	init:function(src){
		if(src&&src.tagName&&src.tagName=="SELECT"){
			
			var options=src.options;

			var div=new Dom("span");
			div.style.display="inline-block";

			if(src.name){//如果有name属性，用一个hidden代替之
				var hideField=new Dom("input");
				hideField.type="hidden";
				hideField.name=src.name;
				hideField.value=src.value;
				this.hideField=hideField;

				div.appendChild(hideField);
			};


			var sel=this.createSelect(src);
			
			div.appendChild(sel);


			var ul=new Dom("ul");
	
			for(var i=0;i<options.length;i++){
				ul.appendChild(this.createOption(options[i].innerHTML,options[i].value,options[i].selected));
			}

			ul.style.width=src.offsetWidth+"px";
			ul.style.position="absolute";
			ul.hide();
			ul.className="opt"
			div.appendChild(ul);

			this.src=src;
			this.sel=sel;
			this.opt=ul;

			this.setValue(this.selectedOption.innerHTML);//设置初始值

			src.parentNode.replaceChild(div,src);
			

		}
	},
	createSelect:function(src){

		var sel=new Dom("div");
		sel.setAttribute("readonly",true);//="readonly";
		sel.tabIndex=0;
		sel.style.height=src.offsetHeight+"px";
		sel.style.width=src.offsetWidth+"px";
		sel.className="sel";

		var that=this;

		sel.onmousedown=function(e){
			//msg("click");
			e=e||window.event;
			if(that.opt.isShow()){msg("click hide");
				
				that.hideOption();
			}else{msg("click show");
				that.popupOption();
			}
			cancelBubble.call(e);
			preventDefault.call(e);
		};
		
		$(sel).bind("dblclick",function(){
			msg("dblclick")
			return false;
		});

		sel.onblur=function(e){
			that.hideOption();
			that.setValue();
			
		};

		//键盘操作 方向键 IE下只有keydown keyup好用，不支持keypress
		sel.onkeydown=function(e){
			e=e||window.event;
			switch(e.keyCode){
				case keyCode.UP:
				that.setNow(-1);
				break;

				case keyCode.DOWN:
				that.setNow(1);
				break;

				case keyCode.ENTER:
				if(that.opt.isShow()){
					that.hideOption();
					that.setNow(0);
				}
				break;

				case keyCode.ESCAPE:
				that.hideOption();
				break;
			}
		};
		return sel;
	},
	createOption:function(txt,val,isNow){
		var that=this;
		var li=new Dom("li");
		
		li.innerHTML=txt;

		li.setAttribute("value",val)

		li.onmousedown=function(e){
			that.selectingValue=this.innerHTML;
			that.selectedOption=this;

		};
		li.onmouseover=function(){
			if(that.now){
				that.now.removeClass("now");	
			}
			that.now=li.addClass("now");;
		};
		if(isNow){
			this.selectedOption=li;

		}
		return li;
	},
	setValue:function(val){
		if(this.selectingValue){
			var that=this;
			this.sel.innerHTML=this.selectingValue;

			setTimeout(function(){that.sel.focus();},1);
			this.selectingValue=null;			
		}else if(val){
			this.sel.innerHTML=val;

			
		}else{
			
		}
		if(this.hideField){
			this.hideField.value=this.getSelectedValue();
		}
	},
	//设置当前选项 step:-1或1,-1向上移动,1向下移动
	setNow:function(step){
		if(step<0){
			if(this.now&&this.now.previousSibling){
				this.now.removeClass("now");
				this.now=this.now.previousSibling.addClass("now");
			}else if(!this.now){
				this.now=this.opt.lastChild.addClass("now");
			}
		}else if(step>0){

			if(this.now&&this.now.nextSibling){
				this.now.removeClass("now");
				this.now=this.now.nextSibling.addClass("now");
				
			}else if(!this.now){
				this.now=this.opt.firstChild.addClass("now");
			}
		}else if(step==0){
			
		}
		this.selectedOption=this.now;
		this.setValue(this.now.innerHTML);
		
		
	},
	popupOption:function(){//弹出选项
		if(this.now){
			this.now.removeClass("now");
		}
		this.now=this.selectedOption.addClass("now");
		this.opt.show();
	},
	hideOption:function(){//隐藏选项
		this.opt.hide();
	},
	getSelectedValue:function(){//取得当前选项的value值
		return this.selectedOption.getAttribute("value");
	}

};

var sl=document.getElementById("sel");
var se=new Select(sl);

//alert(sl.clientWidth+" "+sl.offsetWidth);
//NodeA.compareDocumentPosition(NodeB)
//alert(sl==document.getElementsByTagName("option")[0].parentNode);

function msg(str){
	document.body.appendChild(document.createTextNode(str+" | "));
}

function test(){
	alert(se.getSelectedValue());
};

//alert(document.getElementsByTagName("input")[0].innerHTML);

//$("#span1")[0].focus();
</script>
</html>
